<template>
    <div>
        <div class='container'>
            <div class='handle-box'>

                收件时间：
                <el-date-picker class='mr10' style='padding: 2px 10px'
                                v-model='query.createTime'
                                type='daterange'
                                placeholder='收件时间'
                                format='yyyy 年 MM 月 dd 日'
                                value-format='yyyy-MM-dd'
                                range-separator='至'
                                start-placeholder='开始日期'
                                end-placeholder='结束日期'>
                    收件时间
                </el-date-picker>

                是否已读：
                <el-select v-model='query.haveRead' placeholder='是否已读'
                           class='handle-select mr10'>
                    <el-option v-for='read in readParam' :key='read.value' :label='read.label'
                               :value='read.value'></el-option>
                </el-select>

                发件人：
                <el-input v-model='query.sendMan' placeholder='发件人' class='handle-input mr10' style='width: 150px'
                          prefix-icon='el-icon-search'></el-input>

                <el-button type='primary' icon='el-icon-search' @click='handleSearch'>搜索</el-button>
                <el-button type='primary' icon='el-icon-refresh-left' @click='resetSearch'>重置</el-button>
            </div>

            <div style='margin-bottom: 20px'>
                <el-button type='primary' class='el-icon-message' @click='handleAddEmail()'>写信</el-button>
                <el-button type='primary' class='el-icon-message' @click='handleReadAll()'>全部已读</el-button>
                <el-button type='danger' class='el-icon-delete' @click='handleBluckDelete()'>批量删除</el-button>
                <!--                <el-button type='primary' @click='handleDetail()'>详情</el-button>-->
            </div>

            <el-table
                :data='tableData'
                border
                class='table'
                ref='multipleTable'
                header-cell-class-name='table-header'
                @selection-change='handleSelectionChange'
            >
                <el-table-column type='selection' width='55' align='center'></el-table-column>
                <el-table-column type='index' width='55' label='序号' align='center'></el-table-column>
                <el-table-column prop='nId' label='消息ID' align='center' v-if=false></el-table-column>
                <el-table-column prop='eId' label='信件ID' align='center' v-if=false></el-table-column>
                <el-table-column prop='userName' label='收件人' align='center'></el-table-column>
                <el-table-column prop='eTopic' label='主题' align='center'></el-table-column>
                <el-table-column prop='createTime' label='发送时间' align='center'></el-table-column>
                <el-table-column prop='haveRead' label='是否已读' align='center'></el-table-column>


                <!--工具栏-->
                <el-table-column label='操作' width='180' align='center'>
                    <template slot-scope='scope'>
                        <el-button type='text'
                                   icon='el-icon-reading'
                                   @click='handleDetail(scope.$index, scope.row)'
                        >查看
                        </el-button>
                        <el-button
                            type='text'
                            icon='el-icon-delete'
                            class='red'
                            @click='handleDelete(scope.$index, scope.row)'
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class='pagination'>
                <el-pagination
                    background
                    layout='total, prev, pager, next'
                    :current-page='query.pageIndex'
                    :page-size='query.pageSize'
                    :total='pageTotal'
                    @current-change='handlePageChange'
                ></el-pagination>
            </div>
        </div>
        <add-email ref='addEmailDialog' @get-data='getData'></add-email>
        <detail-email ref='detailEmailDialog' @get-data='getData'></detail-email>
    </div>
</template>

<script>
import { fetchData } from '../../api';
import addEmail from './AddEmail';
import detailEmail from './DetailEmail';

export default {
    name: 'noticetable',
    components: {
        addEmail,
        detailEmail
    },
    data() {
        return {
            query: {
                createTime: [],//收件时间
                sendMan: '',//发件人
                haveRead: '',//是否已读
                pageIndex: 0,
                pageSize: 10
            },
            tableData: [],//数据表格数据
            pageTotal: 0,//分页总数
            readParam: [{
                value: '1',
                label: '是'
            }, {
                value: '0',
                label: '否'
            }],
            multipleSelection: [],//多选值
        };
    },
    //初始化函数
    mounted() {
        this.getData();
    },
    methods: {
        // 给数据表格赋值
        getData: function() {
            this.$http.post(this.global.BASIC_SERVER + '/noticeController/selectPageNotice.json', this.query).then(res => {
                if (res.data.status) {
                    const data = new Array();
                    for (const dataKey of res.data.data.records) {
                        console.log(dataKey);
                        if (dataKey['haveRead'] === '1') {
                            dataKey['haveRead'] = '是';
                        } else {
                            dataKey['haveRead'] = '否';
                        }
                        data.push(dataKey);
                    }
                    this.tableData = data;//数据
                    this.pageTotal = res.data.data.total;//总数
                }
            });
        },
        //发送信件
        handleAddEmail() {
            //调用子组件方法
            this.$nextTick(() => {
                this.$refs.addEmailDialog.init();
            });
        },
        //全部已读
        handleReadAll() {
            this.$http.post(this.global.BASIC_SERVER + '/noticeController/setAllHaveBeenRead.json').then(res => {
                if (res.data.status) {
                    this.$message.success(res.data.msg);
                    this.getData();
                }
            });
        },
        //查看信件
        handleDetail(index, row) {
            //调用子组件方法
            this.$nextTick(() => {
                const param = new Object();
                param.eId = row.eId;
                param.nId = row.nId;
                this.$refs.detailEmailDialog.init(param);
            });
        },
        //删除信件
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                const nIds = new Array();
                nIds.push(row.nId);
                this.$http.post(this.global.BASIC_SERVER + '/noticeController/deleteNoticeByNoticeIds.json', nIds).then(res => {
                    if (res.data.status) {
                        this.$message.success(res.data.msg);
                        this.getData();
                    }
                });
            });
        },
        //批量删除信件
        handleBluckDelete() {
            const nIds = new Array;
            for (const nId of this.multipleSelection) {
                nIds.push(nId['nId']);
            }
            if (nIds < 1) {
                this.$message.error('至少选择一条记录!');
            }
            this.$http.post(this.global.BASIC_SERVER + '/noticeController/deleteNoticeByNoticeIds.json', nIds).then(res => {
                if (res.data.status) {
                    this.$message.success(res.data.msg);
                    this.getData();
                }
            });
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 0);//重置为首页
            this.getData();//重新请求赋值
        },

        // 触发重置按钮
        resetSearch() {
            this.query.sendMan = '';
            this.query.haveRead = '';
            this.query.createTime = [];
            this.$set(this.query, 'pageIndex', 0);//重置为首页
            this.getData();//重新请求赋值
        },
        // 分页导航
        handlePageChange(val) {
            console.log(val);
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        // 多选操作
        handleSelectionChange(val) {
            console.log(val);
            this.multipleSelection = val;
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.yellow {
    color: #E6A23C;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
